<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>品客来农庄</title>
</head>
<style>
	/* body { height: 100%; background: #fff url(static/img/bg.png) 50% 50% no-repeat; background-size: cover;}	 */
	.plan-table-div{
        position:relative;
    }
    .plan-table-table{
        height:800px;
        overflow:auto;
    }
</style>
<script language="javascript">
	function onSearchName(obj) { //js函数开始
		setTimeout(function () { //因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
			var storeId = document.getElementById('store'); //获取table的id标识
			var rowsLength = storeId.rows.length; //表格总共有多少行
			var key = obj.value; //获取输入框的值
			var searchCol = 1; //要搜索的哪一列，这里是第一列，从0开始数起
			for (var i = 1; i < rowsLength; i++) { //按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）
				var searchText = storeId.rows[i].cells[searchCol].innerHTML; //取得table行，列的值
				if (searchText.match(key)) { //用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
					storeId.rows[i].style.display = ''; //显示行操作，
				} else {
					storeId.rows[i].style.display = 'none'; //隐藏行操作
				}
			}
		}, 200); //200为延时时间
	}

	function onSearchNianJi(obj) { //js函数开始
		setTimeout(function () { //因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
			var storeId = document.getElementById('store'); //获取table的id标识
			var rowsLength = storeId.rows.length; //表格总共有多少行
			var key = obj.value; //获取输入框的值
			var searchCol = 2; //要搜索的哪一列，这里是第一列，从0开始数起
			for (var i = 1; i < rowsLength; i++) { //按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）
				var searchText = storeId.rows[i].cells[searchCol].innerHTML; //取得table行，列的值
				if (searchText.match(key)) { //用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
					storeId.rows[i].style.display = ''; //显示行操作，
				} else {
					storeId.rows[i].style.display = 'none'; //隐藏行操作
				}
			}
			// var td0 = storeId.rows[1].cells[0];
			// var td1 = storeId.rows[1].cells[1];
			// var td2 = storeId.rows[1].cells[2];
			// var td3 = storeId.rows[1].cells[3];
			// var td4 = storeId.rows[1].cells[4];
			// var td5 = storeId.rows[1].cells[5];
			// var td6 = storeId.rows[1].cells[6];
			// var td7 = storeId.rows[1].cells[7];
			// var td8 = storeId.rows[1].cells[8];

			// td0.innerHTML = "总计";
			// td1.innerHTML = "-";
			// td2.innerHTML = "高一";
			// td3.innerHTML = 10;
			// td4.innerHTML = 11;
			// td5.innerHTML = 12;
			// td6.innerHTML = "-";
			// td7.innerHTML = "-";
			// td8.innerHTML = "-";
		}, 200); //200为延时时间
	}

	function onSearchMonth(obj) { //js函数开始
		setTimeout(function () { //因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
			var storeId = document.getElementById('store'); //获取table的id标识
			var rowsLength = storeId.rows.length; //表格总共有多少行
			var key = obj.value; //获取输入框的值
			var searchCol = 6; //要搜索的哪一列，这里是第一列，从0开始数起
			for (var i = 1; i < rowsLength; i++) { //按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）
				var searchText = storeId.rows[i].cells[searchCol].innerHTML; //取得table行，列的值
				if (searchText.match(key)) { //用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
					storeId.rows[i].style.display = ''; //显示行操作，
				} else {
					storeId.rows[i].style.display = 'none'; //隐藏行操作
				}
			}
		}, 200); //200为延时时间
	}



	function tick() {
		var today = new Date();
		var month = today.getMonth() + 1;
		// <!--getMonth显示当前月份-1，所以要+1才能显示当前月份-->
		var year, date, hours, minutes, seconds;
		var intHours, intMinutes, intSeconds;
		// <!--显示几天为星期几-->
		var week = new Array()
		week[0] = "星期天 ";
		week[1] = "星期一 ";
		week[2] = "星期二 ";
		week[3] = "星期三 ";
		week[4] = "星期四 ";
		week[5] = "星期五 ";
		week[6] = "星期六 ";
		intHours = today.getHours();
		intMinutes = today.getMinutes();
		intSeconds = today.getSeconds();
		year = today.getFullYear();
		date = today.getDate();
		var time;
		if (intHours == 0) {
			hours = "00:";
		} else if (intHours < 10) {
			hours = "0" + intHours + ":";
		} else {
			hours = intHours + ":";
		}
		if (intMinutes < 10) {
			minutes = "0" + intMinutes + ":";
		} else {
			minutes = intMinutes + ":";
		}
		if (intSeconds < 10) {
			seconds = "0" + intSeconds + " ";
		} else {
			seconds = intSeconds + " ";
		}
		//根据不同的时间显示不同的问候。
		//下面采用自己总结的测试纠正法对time进行赋值
		time = "午夜好";
		if (today.getHours() <= 22) time = "晚上好";
		if (today.getHours() <= 19) time = "傍晚好";
		if (today.getHours() <= 17) time = "下午好";
		if (today.getHours() <= 14) time = "中午好";
		if (today.getHours() <= 12) time = "上午好";
		if (today.getHours() <= 8) time = "早上好";
		if (today.getHours() <= 5) time = "凌晨好";
		timeString = "今天是：" + year + "年" + month + "月" + date + "日  " + hours + minutes + seconds + week[today.getDay()] +
			time;
		Clock.innerHTML = timeString;
		window.setTimeout("tick();", 1000);
	}
	window.onload = tick;
</script>

<body>
	<h1 align="center" style="color:red">注意事项</h1>
	<h2 align="center" style="color:green">本次点餐为明天的用餐，晚上十一点到次日早上六点不能点餐，数据不会上传。<br>当日重复提交数据会覆盖旧数据，以最新为准！<br>如当日点餐过后想取消点餐，请重新提交一次，每个份数输入 0 即可！</h2>
	<h3 align="center" style="color:greenyellow" id="Clock"></h3>
	<div style="width:100%;text-align:center">
		<form action="/input_data" method="post">
			<p>姓名：<input type="text" name="name" placeholder="姓名"></p>
			<p>年级：
				<select name="select_nian_ji">
					<option value="qi">七年级</option>
					<option value="ba">八年级</option>
					<option value="jiu">九年级</option>
					<option value="shi">高一</option>
					<option value="shi_yi">高二</option>
					<option value="shi_er">高三</option>
				</select>
			</p>
			<p>早餐点餐份数：<input type="number" name="zao_numbers" placeholder="份数"></p>
			<p>午餐点餐份数：<input type="number" name="wu_numbers" placeholder="份数"></p>
			<p>晚餐点餐份数：<input type="number" name="wan_numbers" placeholder="份数"></p>
			<p><input type="submit" style="height:35px; width:100px" value="提交"></p>
		</form>
	</div>
	<!-- <div> 
		筛选姓名：<input name="name_key" type="text" id="key" onkeydown="onSearchName(this)" value="" />
		筛选年级：<input name="nian_ji_key" type="text" id="key" onkeydown="onSearchNianJi(this)" value="" />
		筛选月份：<input name="month_key" type="text" id="key" onkeydown="onSearchMonth(this)" value="" />
	</div> -->
	<form action="/search_data" method="post">
	<div> 
		筛选姓名：<input name="name_key" type="text" />
		筛选年级：<input name="nian_ji_key" type="text" />
		筛选月份：<input name="month_key" type="text"/>
		<input type="submit" style="height:35px; width:100px;margin-left:10px" value="查询">
	</div>
	</form>
	<br>
	<table border="2" style="width:100%;text-align:center" id="store">
		<tr>
			<td>总计</td>
			<td>早餐：{{zao_sum}}</td>
			<td>午餐：{{wu_sum}}</td>
			<td>晚餐：{{wan_sum}}</td>
		</tr>
	</table>

		<div class="plan-table-div">
			<div class="plan-table-table">
	<table border="2" style="width:100%;text-align:center" id="store">
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年级</th>
			<th>早餐（份）</th>
			<th>午餐（份）</th>
			<th>晚餐（份）</th>
			<th>用餐时间</th>
			<th>用餐时间（星期）</th>
			<th>点餐时间</th>
		</tr>
		{% for data in all_data %}
		<tr>
			<td>{{ data.id}}</td>
			<td>{{ data.name}}</td>
			<td>{{ data.nian_ji}}</td>
			<td>{{ data.zao_number}}</td>
			<td>{{ data.wu_number}}</td>
			<td>{{ data.wan_number}}</td>
			<td>{{ data.eat_day}}</td>
			<td>{{ data.eat_week}}</td>
			<td>{{ data.dian_can_time}}</td>
		</tr>
		{% endfor %}
	</table>
	</div>
	</div>
</div>
</body>

</html>